<script setup>
import {Close, Plus} from "@element-plus/icons-vue";
import {ref} from "vue";
import {addLine} from "@/api/line.js";
import {ElMessage} from "element-plus";
const inputFlag = ref(true);
const taskNameValue = ref("");
const props = defineProps({
  taskId: {
    type: String,
  }
})
const emit = defineEmits(["addLineSuccess"])
const handleAddLine = async () => {
  const param = {
    taskId: props.taskId,
    lineName: taskNameValue.value
  }
  let res = await addLine(param);
  if (res.code === 200) {
    ElMessage.success("添加成功");
    inputFlag.value = true;
    taskNameValue.value = "";
    emit("addLineSuccess");
  }
}
</script>

<template>
  <div class="add-line flex-center-center pointer" v-if="inputFlag" @click="inputFlag = false">
    <el-icon class="pr5">
      <Plus></Plus>
    </el-icon>
    <span>添加另一个列表</span>
  </div>
  <div class="add-line-input" v-else>
    <el-input class="input" v-model="taskNameValue" placeholder="输入列表名称..."></el-input>
    <div class="btn-container">
      <el-button type="primary" @click="handleAddLine">添加列表</el-button>
      <div class="common-icon pointer ml-2">
        <el-icon >
          <Close/>
        </el-icon>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.add-line {
  width: 260px;
  height: 40px;
  border-radius: 10px;
  flex-grow: 0;
  flex-shrink: 0;
  margin-top: 15px;
  margin-right: 15px;
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(30px);
}
.add-line-input {
  width: 260px;
  height: 100px;
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(30px);
  .input {
    width: 240px;
  }
  .btn-container {
    width: 240px;
    margin-top: 10px;
    display: flex;
    justify-content: flex-start;
  }
}
.common-icon {
  &:hover {
    background: #e7e7e7;
  }
}
</style>
